/* Input fields
  ========================================================================== */
/**
* These rules overwrite existing Bootstrap rules
*
* Variables file: assets/stylesheets/eos-components/input-fields/input-password.variables.scss
*/

.eos-input-password {
  position: relative;
}

/* Password Strength Meter */

.password-strength-meter {
  align-items: center;
  display: flex;
  height: $eos-text-input-password-strength-meter-height;
  visibility: hidden;
  width: $eos-password-meter-width;

  .meter {
    background: $eos-text-input-password-meter-background;
    height: $eos-text-input-password-meter-height;
    margin-right: $eos-text-input-password-meter-margin-right;
    width: 24%;
  }

  .meter-text {
    font-size: $eos-text-input-password-meter-text-size;
    font-weight: 600;
    text-align: end;
    width: 25%;
  }

  &.short {
    .meter-text {
      color: $eos-form-msg-color;

      &::after {
        content: 'too short';
      }
    }
  }

  &.weak {
    .meter:nth-child(-n + 1) {
      background: $eos-form-element-error;
    }

    .meter-text {
      color: $eos-form-element-error;

      &::after {
        content: 'weak';
      }
    }
  }

  &.medium {
    .meter:nth-child(-n + 2) {
      background: $eos-text-input-password-medium;
    }

    .meter-text {
      color: $eos-text-input-password-medium;

      &::after {
        content: 'Medium';
      }
    }
  }

  &.strong {
    .meter:nth-child(-n + 3) {
      background: $eos-form-element-approved;
    }

    .meter-text {
      color: $eos-form-element-approved;

      &::after {
        content: 'Strong';
      }
    }
  }
}
